<template>
	<view class="content" v-if="!ish">
		<view class="status-bar"></view>
		<view class="tabbar-wrap">
			<view class="tabbar-menu">
				<view class="menu-list">
					<view v-for="(tab, index) in tabBars" :key="index" :class="['menu-item', tabIndex==index ? 'active' : '']" @click="tapTab(index)">{{tab.name}}</view>
				</view>
				<view class="add-room" @click="addRoom">
					<image class="add-icon" src="/static/img/dv.png" mode=""></image>
					<template v-if="info.type == '1'">
						<text>开启派对</text>
					</template>
					<template v-if="info.type == '0'">
						<text>申请主持人</text>
					</template>
				</view>
			</view>
			<view class="tabbar-content">
				<view class="search-wrap">
					<view class="uni-icon uni-icon-search"></view>
					<view class="input">
						<input v-model="key" confirm-type="search" placeholder="搜索" @confirm="getLoveIndex(key)" />
					</view>
				</view>
				<view class="dating-list">
					<view class="dating-item" v-for="(item, index) in list" :key="index" @click="openLive(item)">
						<template v-if="item.type == 2">
							<view class="type-wrap type2">
								<text>专属</text>
							</view>
						</template>
						<template v-if="item.type == 3">
							<view class="type-wrap type3">
								<text>保爱</text>
							</view>
						</template>
						<view class="user-wrap">
							<image class="cover-image" :src="getCoverImage(item)" mode="aspectFill"></image>
							<view class="user-info">
								<view class="info">
									<view class="age">{{getCoverAge(item)}}岁</view>
									<view class="city">
										<image class="city-icon" src="/static/img/location1.png" mode=""></image>
										<text>{{getCoverCity(item)}}</text>
									</view>
								</view>
								<view class="name">{{item.name}}</view>
							</view>
						</view>
						<view class="matchmaker-wrap">
							<image class="avatar" :src="getAvatarUrl(item.user.avatar)" mode="aspectFill"></image>
							<text class="name">{{item.user.name}}</text>
						</view>
					</view>
					<view v-if="isEmpty" class="empty-wrap">
						<image class="empty-icon" src="/static/img/empty.png" mode=""></image>
						<text class="empty-text">暂无数据</text>
					</view>
				</view>
			</view>
			<uni-load-more :status="status" :content-text="contentText"></uni-load-more>
		</view>
	</view>
	<view class="nonesty" v-else>
		
		<view class="status-bar"></view>
		<view class="headerbox">派对</view>
		<view  v-for="(item, index) in swiperarr" :key="index">
			<image :src="item.image"  class="swiperitem"></image>
		</view>
		
	</view>
</template>

<script>
	// #ifdef APP-PLUS
	import permision from "@/common/permission.js"
	// #endif
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				myInfo: {
					sex: '1',
				},
				key: '',
				scrollLeft: 0,
				tabIndex: 0,
				tabBars: [
					{
						name: '视频派对',
						id: '0'
					},
					{
						name: '专属派对',
						id: '2'
					},
					{
						name: '单人直播',
						id: '7'
					},
				],
				rose: 0,
				info: {},
				isEmpty: false,
				list: [],
				page: 1,
				status: 'more',
				contentText: {
					contentdown: '加载更多',
					contentrefresh: '加载中',
					contentnomore: '木有了~'
				},
				isPermissionsCAMERA: false,
				isPermissionsRECORD_AUDIO: false,
				inviteShow: false,
				ish:true,   //是否yc派对板块
				swiperarr:[],    //轮播图
			}
		},
		onLoad() {
			const hiddenInfo = uni.getStorageSync('isHidden');
			if(hiddenInfo.isHidden=="0"){
				this.ish=false;
			}
			
			try {
				const myInfo = uni.getStorageSync('myInfo');
				if (myInfo) {
					this.myInfo = myInfo;
				}
			} catch (e) {
				console.log(e);
			}
			this.getSwip();
		},
		onReady() {
			if (this.tabIndex == 2) {
				this.getLiveIndex();
			} else {
				this.getLoveIndex();
			}
		},
		onPullDownRefresh() {
			this.page = 1;
			setTimeout(() => {
				if (this.tabIndex == 2) {
					this.getLiveIndex();
				} else {
					this.getLoveIndex();
				}
			}, 500)
		},
		onReachBottom() {
			this.status = 'loading';
			if (this.tabIndex == 2) {
				this.getLiveIndex();
			} else {
				this.getLoveIndex();
			}
		},
		methods: {
			getSwip(){
				this.$api.api.ajaxData({
					method: 'V1.Banner',
					uid: this.myInfo.id,
					banner_id:'',
				}, res => {
					if(res.code==200){
						this.swiperarr=res.data;
					}
					
				}, err => {
					uni.hideLoading();
					
				})
			},
			tapTab: function (index) {
				if (this.tabIndex == index) {
					return false;
				}
				this.tabIndex = index;
				this.page = 1;
				if (this.tabIndex == 2) {
					this.getLiveIndex();
				} else {
					this.getLoveIndex();
				}
			},
			
			getLoveIndex: function (key) {
				let keyword = ''
				if (key) {
					keyword = key
					this.page = 1
				}
				uni.showLoading({
					title: ''
				});
				this.$api.api.ajaxData({
					method: 'V1.LoveIndex',
					uid: this.myInfo.id,
					token: this.myInfo.token,
					type: this.tabBars[this.tabIndex].id,
					key: keyword,
					page: this.page,
				}, res => {
					uni.hideLoading();
					uni.stopPullDownRefresh();
					console.log('V1.LoveIndex返回信息',res)
					if (res.status) {
						if (this.page == 1) {
							this.list = [];
							for (let i = 0; i < res.data.length; i++) {
								this.list.push(res.data[i])
							}
							if (this.list.length == 0) {
								this.isEmpty = true;
							} else {
								this.isEmpty = false;
							}
							this.rose = res.extra.rose
							this.info = res.extra.info
							uni.setStorage({
								key: 'application_rose',
								data: this.rose,
								success: function() {
									console.log('application_rose已存储');
								}
							});
							this.page++
							this.status = 'more'
						} else {
							if (res.data.length > 0) {
								for (let i = 0; i < res.data.length; i++) {
									this.list.push(res.data[i])
								}
								this.page++
								this.status = 'more'
							} else {
								this.status = 'noMore'
							}
						}
					} else {
						uni.showToast({
							title: res.msg,
							position: 'bottom',
							icon: 'none'
						});
					}
				}, err => {
					uni.hideLoading();
					uni.showToast({
						title: '网络错误，请稍后再试',
						position: 'bottom',
						icon: 'none'
					});
				})
			},
			
			getLiveIndex: function () {
				uni.showLoading({
					title: ''
				});
				this.$api.api.ajaxData({
					method: 'V2.LiveIndex',
					uid: this.myInfo.id,
					token: this.myInfo.token,
					type: this.tabBars[this.tabIndex].id,
					page: this.page,
				}, res => {
					console.log('V2.LiveIndex返回信息',res)
					uni.hideLoading();
					uni.stopPullDownRefresh();
					if (res.status) {
						if (this.page == 1) {
							this.list = [];
							for (let i = 0; i < res.data.list.length; i++) {
								this.list.push(res.data.list[i])
							}
							if (this.list.length == 0) {
								this.isEmpty = true;
							} else {
								this.isEmpty = false;
							}
							this.info = res.data.info
							this.page++
							this.status = 'more'
						} else {
							if (res.data.list.length > 0) {
								for (let i = 0; i < res.data.list.length; i++) {
									this.list.push(res.data.list[i])
								}
								this.page++
								this.status = 'more'
							} else {
								this.status = 'noMore'
							}
						}
					}
				})
			},
			
			getCoverImage: function (item) {
				let userAvatar = item.user.avatar.indexOf(this.QINIUURL) == -1 ? item.user.avatar : item.user.avatar + '?imageView2/1/w/300/h/300';
				let guestAvatar = '';
				let manuserAvatar = '';
				if (!!item.guest) {
					guestAvatar = item.guest.avatar.indexOf(this.QINIUURL) == -1 ? item.guest.avatar : item.guest.avatar + '?imageView2/1/w/300/h/300'
				}
				if (!!item.manuser) {
					manuserAvatar = item.manuser.avatar.indexOf(this.QINIUURL) == -1 ? item.manuser.avatar : item.manuser.avatar + '?imageView2/1/w/300/h/300'
				}
				if (this.myInfo.sex == 1) {
					return !!item.guest ? guestAvatar : userAvatar
				}
				if (this.myInfo.sex == 2) {
					return !!item.manuser ? manuserAvatar : userAvatar
				}
			},
			
			getCoverAge: function (item) {
				if (this.myInfo.sex == 1) {
					return !!item.guest ? item.guest.age : item.user.age
				}
				if (this.myInfo.sex == 2) {
					return !!item.manuser ? item.manuser.age : item.user.age
				}
			},
			
			getCoverCity: function (item) {
				if (this.myInfo.sex == 1) {
					return !!item.guest ? item.guest.city : item.user.city
				}
				if (this.myInfo.sex == 2) {
					return !!item.manuser ? item.manuser.city : item.user.city
				}
			},
			
			getCoverName: function (item) {
				if (this.myInfo.sex == 1) {
					return !!item.guest ? item.guest.name : item.user.name
				}
				if (this.myInfo.sex == 2) {
					return !!item.manuser ? item.manuser.name : item.user.name
				}
			},
			
			getAvatarUrl: function (url) {
				if (url.indexOf(this.QINIUURL) == -1) {
					return url;
				} else {
					return url + '?imageView2/1/w/100/h/100';
				}
			},
			
			addRoom: async function () {
				if (this.info.type == 1) {
					// #ifdef APP-PLUS
					let status = await this.checkPermission();
					if (status !== 1) {
						return false;
					}
					// #endif
					uni.showActionSheet({
						itemList: ['视频派对', '专属派对', '单人直播'],
						success: res => {
							uni.navigateTo({
								url: '../dating/add?type=' + res.tapIndex
							})
						},
						fail: err => {
							console.log(err.errMsg);
						}
					});
				} else {
					if (!!this.info.idcard) {
						uni.navigateTo({
							url: '../my/apply_rule'
						})
					} else {
						uni.showModal({
							title: '',
							content: '申请主持人，请先实名认证',
							success: res => {
								if (res.confirm) {
									uni.showToast({
										title: '未实名，请前往个人中心进行实名认证',
										position: 'bottom',
										icon: 'none'
									});
								}
							}
						});
					}
				}
			},
			
			openLive: async function (item) {
				// #ifdef APP-PLUS
				let status = await this.checkPermission();
				if (status !== 1) {
					return false;
				}
				// #endif
				if (item.type == 1 || item.type == 3) {
					uni.showLoading({
						title: ''
					});
					this.$api.api.ajaxData({
						method: 'V1.LoveDetail',
						uid: this.myInfo.id,
						token: this.myInfo.token,
						id: item.id
					}, res => {
						uni.hideLoading();
						uni.showToast({
							title: res.msg,
							position: 'bottom',
							icon: 'none'
						});
						if (res.status) {
							this.$tim.joinGroup({
								groupID: this.IDBEFORE + res.data.rome.id,
								type: this.TIM.TYPES.GRP_AVCHATROOM,
							}).then(imResponse => {
								console.log('------>申请加群', imResponse.data)
							}).catch(imError => {
								console.warn('------>申请加群失败', imError);
							});
							getApp().globalData.invite_list = res.data.list;
							let live = {
								room: {
									id: res.data.rome.id,
									name: res.data.rome.name,
								},
								character: 'audience',
								rose: res.data.rose,
								url: res.data.play,
								count: res.data.list.length,
								ratio: res.data.ratio,
								gift: {
									id: res.data.gift.id,
									name: res.data.gift.name,
									file: res.data.gift.file,
									rose: res.data.gift.rose
								},
								anchor: {
									id: res.data.rome.user.id,
									name: res.data.rome.user.name,
									avatar: res.data.rome.user.avatar,
									sex: res.data.rome.user.sex,
									age: res.data.rome.user.age,
									city: res.data.rome.user.city,
								},
								type: item.type
							}
							uni.navigateTo({
								url: '../live/live_room?live=' + encodeURIComponent(JSON.stringify(live))
							});
						}
					}, err => {
						uni.hideLoading();
						uni.showToast({
							title: '网络错误，请稍后再试',
							position: 'bottom',
							icon: 'none'
						});
					})
				}
				if (item.type == 2) {
					let modal_content = '';
					if (this.info.sex == '1') {
						modal_content = '专属派对只允许申请后上台\n(上台后将消耗'+this.rose+'米币/分钟)'
					}
					if (this.info.sex == '2') {
						modal_content = '专属派对只允许申请后上台'
					}
					uni.showModal({
						title: '',
						content: modal_content,
						confirmText: '立即申请',
						success: res => {
							if (res.confirm) {
								let custom_ext = {
									roomid: item.id,
									id: this.myInfo.id,
									name: this.myInfo.name,
									avatar: this.myInfo.avatar,
									sex: this.myInfo.sex,
									age: this.myInfo.age,
									city: this.myInfo.city
								}
								let message = this.$tim.createCustomMessage({
									to: this.IDBEFORE + item.user.id,
									conversationType: this.TIM.TYPES.CONV_C2C,
									payload: {
										data: 'ApplicationJoin',
										description: '专属派对申请上麦',
										extension: JSON.stringify(custom_ext)
									}
								});
								this.$tim.sendMessage(message).then(imResponse => {
									console.log('专属派对申请上麦消息发送成功', imResponse);
									uni.showToast({
										title: '申请已提交，请耐心等待',
										position: 'bottom',
										icon: 'none'
									});
								}).catch(imError => {
									console.warn('专属派对申请上麦消息发送失败', imError);
								});
							}
						}
					});
				}
				if (this.tabIndex == 2) {
					this.openLove(item);
				}
			},
			
			openLove: async function (item) {
				// #ifdef APP-PLUS
				let status = await this.checkPermission();
				if (status !== 1) {
					return false;
				}
				// #endif
				uni.showLoading({
					title: ''
				});
				this.$api.api.ajaxData({
					method: 'V2.LiveJoin',
					uid: this.myInfo.id,
					token: this.myInfo.token,
					type: this.tabBars[this.tabIndex].id,
					id: item.id
				}, res => {
					uni.hideLoading();
					uni.showToast({
						title: res.msg,
						position: 'bottom',
						icon: 'none'
					});
					if (res.status) {
						this.$tim.joinGroup({
							groupID: this.IDBEFORE + res.data.one.id,
							type: this.TIM.TYPES.GRP_AVCHATROOM,
						}).then(imResponse => {
							console.log('申请加群成功', JSON.stringify(imResponse.data))
						}).catch(imError => {
							console.warn('申请加群失败', imError);
						});
						let live = {
							room: {
								id: res.data.one.id,
								name: res.data.one.name,
							},
							character: 'audience',
							url: res.data.play,
							anchor: {
								id: res.data.one.user.id,
								name: res.data.one.user.name,
								avatar: res.data.one.user.avatar,
								sex: res.data.one.user.sex,
								age: res.data.one.user.age,
								city: res.data.one.user.city,
							},
						}
						uni.navigateTo({
							url: '../live/seven_room?live=' + encodeURIComponent(JSON.stringify(live))
						});
					}
				})
			},
			
			// #ifdef APP-PLUS
			checkPermission: async function () {
				let permissionList = ['camera', 'audio'];
				let status = 0;
				let cameraStatus = 0;
				let recordStatus = 0;
				for (let i = 0; i < permissionList.length; i++) {
					if (permissionList[i] == 'camera') {
						cameraStatus = permision.isIOS ? await permision.requestIOS('camera') : await permision.requestAndroid('android.permission.CAMERA');
						if (cameraStatus === null || cameraStatus === 1) {
							cameraStatus = 1;
						} else {
							uni.showModal({
								content: "需要摄像头权限",
								confirmText: "设置",
								success: function(res) {
									if (res.confirm) {
										permision.gotoAppSetting();
									}
								}
							})
						}
					}
					if (permissionList[i] == 'audio') {
						recordStatus = permision.isIOS ? await permision.requestIOS('record') : await permision.requestAndroid('android.permission.RECORD_AUDIO');
						if (recordStatus === null || recordStatus === 1) {
							recordStatus = 1;
						} else {
							uni.showModal({
								content: "需要麦克风权限",
								confirmText: "设置",
								success: function(res) {
									if (res.confirm) {
										permision.gotoAppSetting();
									}
								}
							})
						}
					}
				}
				if (cameraStatus === 1 && recordStatus === 1) {
					status = 1
				}
				return status;
			},
			// #endif
		}
	}
</script>

<style lang="scss">
	@import '../../common/common.scss';
	.nonesty{
		padding-top: var(--status-bar-height);
		text-align: center;
		
		.nonemsg{
			font-size: 32rpx;
			margin-bottom: 40rpx;
		}
		.swiperitem{
			width: 690rpx !important;
			height: 320rpx !important;
		}
		
		.headerbox{
			height: 100rpx;
			font-weight: bold;
			font-size: 38rpx;
			color: #000 !important;
			line-height: 100rpx;
			background-color: #fff;
		}
	}
	.status-bar {
		background-color: #fff;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 9;
	}
	.tabbar-menu {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
		background-color: #fff;
		border-bottom: 1rpx solid #f7f7f7;
		padding-top: var(--status-bar-height);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 9;
		.menu-list {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex: 1;
			padding: 0 20rpx;
			.menu-item {
				height: 80rpx;
				line-height: 80rpx;
				padding: 0 20rpx;
				font-size: 28rpx;
				text-align: center;
				color: #999;
				position: relative;
				&.active {
					color: #EE3476;
				}
				&.active::after {
					content: '';
					width: 20rpx;
					height: 10rpx;
					background: #EE3476;
					border-radius: 10rpx;
					position: absolute;
					left: 50%;
					bottom: 0;
					margin-left: -10rpx;
				}
			}
		}
		.add-room {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 80rpx;
			padding: 0 20rpx;
			.add-icon {
				width: 40rpx;
				height: 40rpx;
				margin-right: 5rpx;
			}
			text {
				font-size: 28rpx;
				color: #333;
			}
		}
	}
	.tabbar-content {
		margin-top: var(--status-bar-height);
		padding-top: 80rpx;
	}
	.search-wrap {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin: 20rpx;
		background: #fff;
		padding: 0 40rpx 0 20rpx;
		border-radius: 60rpx;
		.uni-icon {
			font-size: 36rpx;
			color: #666666;
		}
		.input {
			display: flex;
			justify-content: center;
			align-items: center;
			flex: 1;
			height: 60rpx;
			padding: 0 10rpx;
			input {
				flex: 1;
				font-size: 28rpx;
			}
		}
	}
	.dating-list {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
		background-color: #fff;
		padding: 5px 0;
	}
	.dating-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 370rpx;
		box-sizing: border-box;
		position: relative;
		.type-wrap {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 30rpx;
			padding: 0 20rpx;
			border-radius: 30rpx;
			position: absolute;
			right: 20rpx;
			top: 20rpx;
			z-index: 1;
			&.type2 {
				background-color: #927ac3;
			}
			&.type3 {
				background-color: #ED4574;
			}
			text {
				font-size: 18rpx;
				color: #fff;
			}
		}
		.user-wrap {
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			margin-bottom: 10rpx;
			.cover-image {
				width: 360rpx;
				height: 360rpx;
				border-radius: 10rpx;
			}
			.user-info {
				width: 100%;
				height: 100rpx;
				background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.6));
				border-radius: 0 0 10rpx 10rpx;
				position: absolute;
				left: 0;
				bottom: 0;
				.info {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					padding: 0 20rpx;
					.age {
						font-size: 30rpx;
						color: #fff;
						margin-right: 10rpx;
					}
					.city {
						display: flex;
						justify-content: flex-start;
						align-items: center;
						.city-icon {
							width: 30rpx;
							height: 30rpx;
							margin-right: 10rpx;
						}
						text {
							font-size: 30rpx;
							color: #fff;
						}
					}
				}
				.name {
					padding: 0 20rpx;
					font-size: 28rpx;
					color: #fff;
				}
			}
		}
		.matchmaker-wrap {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			width: 100%;
			padding: 0 20rpx;
			box-sizing: border-box;
			margin-bottom: 10rpx;
			.avatar {
				width: 60rpx;
				height: 60rpx;
				border-radius: 60rpx;
				margin-right: 10rpx;
			}
			.name {
				width: 280rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				font-size: 28rpx;
				color: #333;
			}
		}
	}
	.friends-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 370rpx;
		box-sizing: border-box;
		position: relative;
		.peoples {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 5rpx 20rpx;
			background-color: rgba(0,0,0,0.6);
			border-radius: 30rpx;
			position: absolute;
			right: 20rpx;
			top: 20rpx;
			z-index: 1;
			.peoples-icon {
				width: 20rpx;
				height: 20rpx;
				margin-right: 5rpx;
			}
			text {
				font-size: 18rpx;
				color: #fff;
			}
		}
		.matchmaker-wrap {
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			margin-bottom: 10rpx;
			.cover-image {
				width: 360rpx;
				height: 360rpx;
				border-radius: 10rpx;
			}
			.room-info {
				width: 100%;
				height: 100rpx;
				background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.6));
				border-radius: 0 0 10rpx 10rpx;
				position: absolute;
				left: 0;
				bottom: 0;
				.title {
					padding: 0 20rpx;
					font-size: 30rpx;
					color: #fff;
				}
				.name {
					padding: 0 20rpx;
					font-size: 24rpx;
					color: #fff;
				}
			}
		}
		.member-wrap {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			width: 100%;
			height: 70rpx;
			box-sizing: border-box;
			position: relative;
			.avatar {
				width: 56rpx;
				height: 56rpx;
				border: 2rpx solid #fff;
				border-radius: 60rpx;
				position: absolute;
				&.avatar0 {
					left: 10rpx;
					top: 0;
					z-index: 7;
				}
				&.avatar1 {
					left: 50rpx;
					top: 0;
					z-index: 6;
				}
				&.avatar2 {
					left: 90rpx;
					top: 0;
					z-index: 5;
				}
				&.avatar3 {
					left: 130rpx;
					top: 0;
					z-index: 4;
				}
				&.avatar4 {
					left: 170rpx;
					top: 0;
					z-index: 3;
				}
				&.avatar5 {
					left: 210rpx;
					top: 0;
					z-index: 2;
				}
				&.avatar6 {
					left: 250rpx;
					top: 0;
					z-index: 1;
				}
			}
		}
	}
</style>
